import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux' 
import {withRouter} from 'react-router'
import mobiscroll from "mobiscroll"
import { ActionCreators } from 'redux-undo'
import './assets/todo.less'

class Todo extends Component {

	static propTypes = {}

	render() {
    	let presentTodos = this.props.todos.todos
		return (
			<div className='todo'>
        <div className='todo-header'>
          <label>Add</label>
        </div>
        <div className='todo-edit'>
          <div className="input-wrapper">
            <input type="text" ref="input" />
          </div>
					<div className='plus-icon'>
						<button className='mbsc-ic mbsc-ic-reply' onClick={this.onSubmit} ></button>
					</div>
        </div>
        <div className='todo-list'>
          <mobiscroll.Form theme="mobiscroll" lang="zh">
						{
							presentTodos&&presentTodos.map((item,index) =>{
								return(
                  <div className="mbsc-divider" key={index}>
                    <label>
                    <input name="cat1" type="checkbox" ref='onChecked' checked={item.completed} onChange={this.onToggle.bind(this,item)} />
                       {item.text}
                    </label>
                    
                     
									</div>
								)
							})
						}
           </mobiscroll.Form>
				</div>
        	<div className='todo-footer'>
            <div className='undo'>
              <button type='button' className="undo-btn btn btn-block btn-primary btn-flat" onClick={this.undo}>
                <label>Undo</label>
              </button>
            </div>
            <div>
              <button className="redo-btn btn btn-block btn-primary btn-flat" >
                <label>Redo</label>
              </button>
            </div>
				  </div>
			</div>
		);
	}
  onSubmit = () => {
    console.log('dfsdfsf')
    let data = this.refs.input.value
    console.log(this.props)
	  var len = this.props.todos.todos.length
		if(data&&data.trim()){
			console.log(data)
		//	this.props.actions.addTodo(data,len)
			this.refs.input.value = ''
      this.props.dispatch({
			type:"todo/add",
			payload: {
				data:data,
        id:len
			}
		})
		}
  }
  onToggle = (item) =>{
	  var len = this.props.todos.todos.length
    console.log('sdfsafsa')
    console.log(this.refs.onChecked.checked)
    this.props.dispatch({
			type:"todo/toggle",
			payload: {
        id:item.id,
        length:len
			}
		})
  }
  undo = () =>{
    console.log('sdfsd')
    console.log(this.props)
    this.props.onUndo()
  }
}

function mapStateToProps(state){
  return {
    todos: state.todo
  }
}

function mapDispatcherToProps(dispatch) {
	return {   //redux示例 action映射
		onUndo: bindActionCreators(ActionCreators.undo,dispatch),
		onRedo: bindActionCreators(ActionCreators.redo,dispatch),
    dispatch:dispatch
	}
}

export default connect(mapStateToProps,mapDispatcherToProps)(withRouter(Todo))